<template>

		<view class="gzzl-wrap">
			<view class="qiun-title-bar">
				<!-- <view class="qiun-title-dot3"></view> -->
				<view class="qiun-title-text align-center">日常内容点击量、点赞数排名</view>
			</view>
			
			
			
			<view class="gzzl-wrap"></view>
				<view class="qiun-title-bar">
					
					<view class="qiun-title-dot"></view>
					
					<view class="qiun-title-text2">点击量前六占比</view>
					<view class="iconfont icon-dianji1"></view>
				</view>
				<view class="data-wrap">
					<!-- uCharts圆环图 ring  -->
					<qiun-data-charts class="charts" type="pie" :chartData="chartData1" :echartsApp="true"
						background="none" :tapLegend="true" :opts="opts1" />
				</view>
				
				<view class="gzzl-wrap"></view>
				<view class="qiun-title-bar">
					<view class="qiun-title-dot"></view>
				
					<view class="qiun-title-text2">点击量前六对应数量</view>
					<view class="iconfont icon-dianji1"></view>
				</view>
				<view class="data-wrap">
					<qiun-data-charts class="charts" type="bar" :chartData="chartData2" :echartsApp="true"
						background="none" :tapLegend="true" :opts="opts2" />
				</view>
				
				<view class="divider"/>

				
				<view class="gzzl-wrap"></view>
				<view class="qiun-title-bar">
					<view class="qiun-title-dot2"></view>
					
					<view class="qiun-title-text2">点赞量前六占比</view>
					<view class="iconfont icon-dianzan1"></view>
				</view>
				<view class="data-wrap">
					<!-- uCharts圆环图 ring  -->
					<qiun-data-charts class="charts" type="pie" :chartData="chartData3" :echartsApp="true"
						background="none" :tapLegend="true" :opts="opts3" />
				</view>

                <view class="gzzl-wrap"></view>
                 <view class="qiun-title-bar">
					<view class="qiun-title-dot2"></view>
					
					<view class="qiun-title-text2">点赞量前六对应数量</view>
					<view class="iconfont icon-dianzan1"></view>
				</view>
				<view class="data-wrap">
					<qiun-data-charts class="charts" type="bar" :chartData="chartData4" :echartsApp="true"
						background="none" :tapLegend="true" :opts="opts4" />
				</view>


		

		</view>

</template>
<script>
	export default {
		token: '',
		name: '',
		components: {},
		props: {},
		data() {
			return {
				token: '',
				show: false,
				formData: {},
				params: {},
				chartData1: {
					"series": [{
						"data": [{
								"name": "内容一",
								"value": 0,

							},
							{
								"name": "内容二",
								"value": 0,

							},
							{
								"name": "内容三",
								"value": 0,

							},
							{
								"name": "内容四",
								"value": 0,

							},
							{
								"name": "内容五",
								"value": 0,

							},
							{
								"name": "内容六",
								"value": 0,

							},
						]
					}]
				},
				chartData2: {
					"categories": ["1", "2", "3", "4", "5", "6"],
					"series": [{
							name: "点击量",
							data: [0, 36, 31, 33, 13, 34],
							color:"#00aaff"
						},
						// {
						// 	name: "完成量",
						// 	data: [18, 27, 21, 24, 6, 28]
						// }
					]
				},
				chartData4: {
					"categories": ["1", "2", "3", "4", "5", "6"],
					"series": [{
							name: "点赞量",
							data: [0, 36, 31, 33, 13, 34],
							color:"#00aa7f"
						},
						// {
						// 	name: "完成量",
						// 	data: [18, 27, 21, 24, 6, 28]
						// }
					]
				},
				menulist: [{
						"text": "内容一",
						"sl": 0
					},
					{
						"text": "内容二",
						"sl": 0
					},
					{
						"text": "内容三",
						"sl": 0
					},
					{
						"text": "内容四",
						"sl": 0
					},
					{
						"text": "内容五",
						"sl": 0
					},
					{
						"text": "内容六",
						"sl": 0
					},

				],
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "总点击量",
						fontSize: 10,
						color: "#333333"
					},
					subtitle: {
						name: "0",
						fontSize: 22,
						color: "#7cb5ec"
					},

					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 10,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					},
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {
						show:true,
					},
			        xAxis: {
			          boundaryGap: "justify",
			          disableGrid: false,
			          min: 0,
			          axisLine: true,
			          
			        },
					yAxis: {
						        disableGrid: true
					},
					extra: {
						bar: {
							type: "stack",
							width: 30,
				  	        meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				},
				opts3: {
					color: ["#caca00", "#c50000", "#55aa7f", "#ea7ccc", "#00557f", "#00aa00", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
				padding: [5, 5, 5, 5],
				dataLabel: true,
				legend: {
					show: true,
					position: "right",
					lineHeight: 25
				},
				    xAxis: {
				      boundaryGap: "justify",
				      disableGrid: false,
				      min: 0,
				      axisLine: true,
				      
				    },
					yAxis: {
						        disableGrid: true
					},
					extra: {
						bar: {
							type: "stack",
							width: 30,
				  	        meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				},
				opts4: {
				color: ["#caca00", "#c50000", "#55aa7f", "#ea7ccc", "#00557f", "#00aa00", "#FC8452", "#9A60B4",
					"#ea7ccc"
				],
					padding: [15, 30, 0, 5],
					legend: {
						show:true,
					},
				    xAxis: {
				      boundaryGap: "justify",
				      disableGrid: false,
				      min: 0,
				      axisLine: true,
				      
				    },
					yAxis: {
						        disableGrid: true
					},
					extra: {
						bar: {
							type: "stack",
							width: 30,
				  	        meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				},
				chartData3: {
					"series": [{
						"data": [{
								"name": "内容一",
								"value": 0,
				
							},
							{
								"name": "内容二",
								"value": 0,
				
							},
							{
								"name": "内容三",
								"value": 0,
				
							},
							{
								"name": "内容四",
								"value": 0,
				
							},
							{
								"name": "内容五",
								"value": 0,
				
							},
							{
								"name": "内容六",
								"value": 0,
				
							},
						]
					}]
				},






			}
		},
		mounted() {

		},
		methods: {
			loadData() {
				var _this = this;
				wx.getStorage({
					key: 'App-Token',
					success(res) {
						_this.token = res.data;
						wx.request({
							url: 'http://xg.kystu.cn:8085/system/projectcontent_cj/ranking',
							method: 'GET',
							header: {
								'Authorization': "Bearer " + _this.token
							},
							success: (res) => {
                                    
								for (var i = 0; i <= res.data.click.length - 1; i++) {
									
									// _this.categories[0] = res.data.click.title;
									
									_this.chartData1.series[0].data[i].value = res.data.click[i].num;
									// _this.chartData2.series[0].name = res.data.click[i].num;
									_this.chartData2.series[0].data[i] = res.data.click[i].num;
									
									// _this.chartData2.series[0].color[i] = _this.opts2.color[i];
									
									// _this.chartData.series[1].data[i].value2 = res.data.ok[i].num;
									_this.chartData1.series[0].data[i].name = res.data.click[i].title
										.substring(0, 4) + '...'
									_this.menulist[i].sl = res.data.click[i].num;
									_this.menulist[i].text = res.data.click[i].title;
								}
								for (var i = 0; i <= res.data.ok.length - 1; i++){
									_this.chartData3.series[0].data[i].value = res.data.ok[i].num;
									// _this.chartData.series[1].data[i].value2 = res.data.ok[i].num;
									_this.chartData3.series[0].data[i].name = res.data.ok[i].title
										.substring(0, 4) + '...'
									_this.chartData4.series[0].data[i] = res.data.ok[i].num;
								}
								
								
								_this.opts1.subtitle.name = (Number(_this.menulist[0].sl) + Number(
										_this
										.menulist[1].sl) + Number(_this.menulist[2].sl) + Number(
										_this.menulist[3].sl) + Number(_this.menulist[4].sl) +
									Number(_this.menulist[5].sl)) + '次'
								if (_this.opts1.subtitle.name == '0') {
									_this.show = false
								} else {
									_this.show = true
								}
							}
						})
						this.chartData1 = JSON.parse(JSON.stringify(res));
					}
				});
			},
			onShow() {
				var _this = this;
				wx.getStorage({
					key: 'App-Token',
					success(res) {
						_this.token = res.data;
						_this.loadData();
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.qiun-title-bar {
		display: flex;
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: center;
		height: 40px;
		text-align: center;
	}

	.qiun-title-dot {
		border-radius: 30px;
		background-color: #409EFF;
		width: 10px;
		height: 16px;
 margin-left: 12px;
	}

	.qiun-title-dot2 {
		border-radius: 30px;
		background-color: #00aa7f;
		width: 10px;
		height: 16px;
 margin-left: 12px;
	}
	.qiun-title-dot3 {
		border-radius: 30px;
		background-color: #409EFF;
		width: 15px;
		height: 16px;
        margin-left: 12px;
		
	}
	.qiun-title-text {
		font-size: 24px;
		color: #666666;
		line-height: 25px;
		height: 22px;
		font-weight: bold;
		font-family: "宋体";
		text-align: center;
		margin-left: 30px; 
		
		}

	.qiun-title-text2 {
		font-size: 12px;
		color: #666666;
		margin-left: 0px;
		line-height: 22px;
		height: 22px;
		font-weight: bold;
		font-family: "宋体";
	}

	.gzzl-wrap {
		position: relative;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		margin-top: 0rpx;
		}
.divider{
	 background: #E0E3DA;
	 width: 100%;
	 height: 5rpx;
	}
</style>
